<template>
	<view class="main">
	  <view>
	  </view>
		<view class="top">
			<image class="mainimg"
				src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5g8GqkRdwdig53bfBq3wAaCTDdlO9fvIC2vTMkMNC7kK0wTH8mpLRVFvWn7a*NkY72LXqfDXF26U5izooOkUVew!/b&bo=7gIBAgAAAAADB80!&rf=viewer_4">
			</image>
		</view>
		<view class="imgbox">

			<image class="centerimg"
				src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5g8GqkRdwdig53bfBq3wAaCbzq2FNFNSUEQZZwHj9CB8BP11jyY7MqKgu0Mlb4A4AnGJPXJGlOxw3QsFfSaUJMs!/b&bo=DAMYAQAAAAADBzQ!&rf=viewer_4">
			</image>
			<view class="center">
				<view class="leftbox">
					<text>导航门店</text>
					<image class="left"
						src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5id*4Z5NELFVRx60QEvlXWgL**HO9cRL4RPoxmboOxw5zJHuK.QKuD3IizlqAAQm0r*h5O5mXMd.bXS8u2Gjgv4!/b&bo=YABgAAAAAAADByI!&rf=viewer_4">
					</image>
				</view>
				<view @click="bai" class="rightbox">
					<text>我要拍照</text>
					<image class="right"
						src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5huEq.Xs7zt6UcDbsUdhrJ8QeYtYidLaBMiqHaI9RU7dcweWqvZozGRxuWsWKeDOfjU0EUykmsvbHgyIY80NhGM!/b&bo=YABSAAAAAAADBxA!&rf=viewer_4">
					</image>
				</view>
			</view>

		</view>
		<view>
			<view class="content">
				<image
					src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5iHoYxTnRqpyV1QkE6iEdsZvRtsmWtvb1uSp9m*FqSngECtItUOMRZ93fXNd73etpWdGneXHrLADCSdCadLbsWg!/b&bo=OAAiAAAAAAADBzg!&rf=viewer_4">
				</image>
				<text>热门套餐</text>
			</view>
			<view class="contentbox">
				<view @click="gotopackage(item)" :class="item.id===5?'content_long':'content_item'"
					v-for="item in contlist" :key="item.id">
					<image :src="item.src"></image>
					<text>{{item.title}}</text>
				</view>

			</view>
		</view>
		<view class="maixiaoyabox">
			<view class="maixiaoya">
				<text>麦小芽生活</text>

				<text>仪式感</text>
			</view>
			<view class="maixiaoya">
				<text>麦小芽大师</text>
				<text>艺术美学</text>
			</view>
			<view class="maixiaoya">
				<text>麦小芽家庭</text>
				<text>家庭记忆</text>
			</view>
		</view>
		<view>

			<view class="content" style="text-align:center;margin: 50rpx 0rpx;margin-right: 40rpx;">
				<image
					src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5iHoYxTnRqpyV1QkE6iEdsZvRtsmWtvb1uSp9m*FqSngECtItUOMRZ93fXNd73etpWdGneXHrLADCSdCadLbsWg!/b&bo=OAAiAAAAAAADBzg!&rf=viewer_4">
				</image>
				<text>麦小芽生活</text>
			</view>
			<view class="contentbox" @click="navlook">
				<view :class="item.id===5?'two_content_long':'content_item'" v-for="item in mvlist" :key="item.id">
					<image :src="item.src"></image>
				</view>

			</view>
		</view>
		<view>

			<view  class="content" style="text-align:center;margin: 50rpx 0rpx;margin-right: 40rpx;">
				<image
					src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5iHoYxTnRqpyV1QkE6iEdsZvRtsmWtvb1uSp9m*FqSngECtItUOMRZ93fXNd73etpWdGneXHrLADCSdCadLbsWg!/b&bo=OAAiAAAAAAADBzg!&rf=viewer_4">
				</image>
				<text>麦小芽大师</text>
			</view>
			<view class="contentbox" @click="navlook">
				<view :class="item.id===5?'two_content_long':'content_item'" v-for="item in mvlist1" :key="item.id">
					<image mode="aspectFill" :src="item.src"></image>
				</view>

			</view>
		</view>
		<view>
		
			<view  class="content" style="text-align:center;margin: 50rpx 0rpx;margin-right: 40rpx;">
				<image
					src="http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5iHoYxTnRqpyV1QkE6iEdsZvRtsmWtvb1uSp9m*FqSngECtItUOMRZ93fXNd73etpWdGneXHrLADCSdCadLbsWg!/b&bo=OAAiAAAAAAADBzg!&rf=viewer_4">
				</image>
				<text>麦小芽家庭</text>
			</view>
			<view class="contentbox" @click="navlook">
				<view :class="item.id===5?'two_content_long':'content_item'" v-for="item in mvlist2" :key="item.id">
					<image mode="aspectFill" :src="item.src"></image>
				</view>
		
			</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { onMounted, ref, nextTick } from 'vue'
	import QRCode from 'qrcodejs2';
	let contlist = ref([
		{ id: 1, src: 'http://a1.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5m0cXg6l0GDYvNCMD4W.Ty48dsN9ktQ2hGH.GcPKU..n.BDo8my850g4FXaCpNgHpLCH.*Sb79I72s1uY8x25bw!/b&ek=1&kp=1&pt=0&bo=SgF1AQAAAAADJz0!&tl=1&vuin=3225605824&tm=1715565600&dis_t=1715567529&dis_k=8c2e6cf5231cd7a9688c7d1b55946ebc&sce=60-1-1&rf=viewer_4', title: '女性职业形象照', price: 120 },
		{ id: 2, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5huEq.Xs7zt6UcDbsUdhrJ9w1gfT8aIu3knpEDRfPbS*9T9c2o0DO9ghsyBLT4KVTNPs3bDQew1Fd8Ofb5b4vus!/b&bo=SgF1AQAAAAADBx0!&rf=viewer_4', title: '文艺照片 - 单人', price: 299 },
		{ id: 3, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5lcC7jymtoTZ7dezKeUGgMu9J6qdHZd2utOsnppRb54cqjvRKoX9mhq1Ujl*p4AMEmkXaXtueTguZgRPx9TiBTI!/b&bo=SgF1AQAAAAADBx0!&rf=viewer_4', title: '证件照 - 经典通用', price: 199 },
		{ id: 4, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5iHoYxTnRqpyV1QkE6iEdsbPo5deagbVlPalniqSfYw6GWd0TPidWqVwMgsOZhUQxoYWjAh9vwmHsJ17M1dNaqw!/b&bo=SgF1AQAAAAADJz0!&rf=viewer_4', title: 'The Girl - 单人', price: 399 },
		{ id: 5, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5iHoYxTnRqpyV1QkE6iEdsYM62TbirTrwjrkP.Z9noW6cbsyadCCDHCgi1lsElkcMd59Ku7QEZHH01tYjaQYdpY!/b&bo=rwIkAQAAAAADN5o!&rf=viewer_4', title: '毕业照片', price: 499 },
	])
	let mvlist = ref([
		{ id: 1, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5kQomn7WJMw3qQS7rLvI5S0eYesAeQ10gBtS2YgEeTgaaHCGX5Pre0AHVtLwNjcGhFzn2GDiKyiwT9mUgaqUgBI!/b&bo=PwGBAQAAAAADB5w!&rf=viewer_4' },
		{ id: 2, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5id*4Z5NELFVRx60QEvlXWhJb1RJUC3VgjLhcXo8p5dXYDlQKxGb0*LnJJrMy2oqHeBWX8Ak4ha9r6hRhRmw18s!/b&bo=QAGBAQAAAAADB.M!&rf=viewer_4' },
		{ id: 3, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5id*4Z5NELFVRx60QEvlXWig5*71.h0SRYr7jxVbdoVDfPbyCdekT3eMWwwMcXTU6*.GU..OWn6Da9sIUqdjDoc!/b&bo=PwGAAQAAAAADB50!&rf=viewer_4' },
		{ id: 4, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5id*4Z5NELFVRx60QEvlXWjCln38ayQ2jL46xle9ZqASNUFfa56NTeORHnPiLkMZZ*K95YXFSMacDJrGfapF6jM!/b&bo=QAGBAQAAAAADB.M!&rf=viewer_4' },
		{ id: 5, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5kQomn7WJMw3qQS7rLvI5S0h*IqDLPI.ZAVJPzTrB1NLnUaVlzhzzBKunSmFNSreHN9ZB2*1HtxxdoI5lusV*.Q!/b&bo=lwLvAAAAAAADB1g!&rf=viewer_4' }
	])
	let mvlist1 = ref([
		{ id: 1, src: 'https://img0.baidu.com/it/u=2583098292,2956502911&fm=253&fmt=auto?w=1280&h=800' },
		{ id: 2, src: 'https://img1.baidu.com/it/u=2937431534,512440527&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=723' },
		{ id: 3, src: 'https://img2.baidu.com/it/u=318089146,190685299&fm=253&fmt=auto?w=1280&h=800' },
		{ id: 4, src: 'https://img2.baidu.com/it/u=1437735997,1684110817&fm=253&fmt=auto?w=800&h=500' },
	])
let mvlist2 = ref([
		{ id: 1, src: 'https://img0.baidu.com/it/u=1508473966,249069563&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500' },
		{ id: 2, src: 'https://img1.baidu.com/it/u=3682511392,358206753&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666' },
		{ id: 3, src: 'https://img2.baidu.com/it/u=2465539263,2624891008&fm=253&fmt=auto&app=138&f=JPEG?w=493&h=300' },
		{ id: 4, src: 'https://img1.baidu.com/it/u=2440276137,859779615&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300' },
	])
	let navlook=()=>{
		uni.navigateTo({
			url: `/pages/index/lookimg`,
		
		})
	}

	let gotopackage = (item : any) => {
		console.log(item)
		uni.setStorageSync('obj', JSON.stringify(item))

		uni.navigateTo({
			url: `/pages/index/Package`,

		})
	}
	
	let bai = ()=>{
		 uni.switchTab({
		 	url:"/pages/hot/hot"
		 })
	}

</script>

<style scoped lang="scss">
	.main {
		background: whitesmoke;
		height: 100%;

	}

	.mainimg {
		width: 100%;
		height: 530rpx;
		/* z-index: 1; */
	}

	.imgbox {
		position: relative;
		top: -100rpx;
		margin-bottom: -100rpx;


	}

	.centerimg {
		width: 100%;
		height: 280rpx;
		background-color: transparent;
	}

	.center image {
		width: 110rpx;
		height: 100rpx;
	}

	.center {
		position: absolute;
		top: 0rpx;
		display: flex;
	}

	.leftbox {
		position: relative;
		top: 50rpx;
		left: 70rpx;

	}

	.rightbox {
		position: relative;
		top: 50rpx;
		left: 230rpx;

	}

	.leftbox,
	.rightbox {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 200rpx;
		width: 200rpx;
		background: white;
	}

	.leftbox text,
	.rightbox text {

		margin-bottom: 40rpx;
		font-weight: 700;
	}

	.content image {
		width: 60rpx;
		height: 40rpx;
		vertical-align: middle;
		margin: 0rpx 20rpx;
	}

	.content text {
		font-weight: 600;
		font-size: 26rpx;
	}

	.content {
		height: 50rpx;
		margin: 20rpx 10rpx;
	}

	.contentbox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 20rpx 20rpx;

	}

	.content_item {
		display: flex;
		flex-direction: column;
		background: white;
		margin-bottom: 20rpx;
	}

	.content_item image {
		width: 320rpx;
		height: 350rpx;
	}

	.content_item text,
	.content_long text {
		margin: 16rpx;
		font-weight: 400;
		font-size: 26rpx;
	}

	.content_long {
		width: 680rpx;
		display: flex;
		flex-direction: column;
		background: white;
		margin-bottom: 20rpx;
		height: 350rpx;
	}

	.two_content_long {
		width: 680rpx;
	}

	.content_long image,
	.two_content_long image {
		width: 100%;

		height: 260rpx;
	}

	.maixiaoyabox {
		display: flex;
		justify-content: space-around;
		margin: 20rpx 0rpx;
	}

	.maixiaoya {
		display: flex;
		flex-direction: column;
		line-height: 40rpx;
		background: white;
		width: 26.5%;
		padding: 14rpx 0rpx;

	}

	.maixiaoya text {
		margin-left: 30rpx;
		font-size: 25rpx;
	}

	.maixiaoya text:nth-child(1) {
		font-weight: 700;
	}

	.maixiaoya:nth-child(1) {
		background: linear-gradient(to bottom, #feb47b, white);
	}
	.maixiaoya:nth-child(2) {
		background: linear-gradient(to bottom, #ecbaf5, white);
	}
	.maixiaoya:nth-child(3) {
		background: linear-gradient(to bottom, #d4ffff, white);
	}
</style>